<template>
  <div class="RadioStation">
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <div class="radiostation">
        <!-- 搜索/假的,其实是组件 -->
        <div class="ser">
          <van-notice-bar :scrollable="false">
            <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
              <van-swipe-item>
                <van-icon name="search" />
                <span style="color:#666">伯虎说</span>&nbsp;&nbsp;
                <span style="color:#999">这两外国人唱国风 好正</span>
              </van-swipe-item>
              <van-swipe-item>
                <van-icon name="search" />
                <span style="color:#666">Exo</span>&nbsp;&nbsp;
                <span style="color:#999">我们9年了</span>
              </van-swipe-item>
              <van-swipe-item>
                <van-icon name="search" />
                <span style="color:#666">刺客</span>&nbsp;&nbsp;
                <span style="color:#999">你的剑好扎心</span>
                <span></span>
              </van-swipe-item>
            </van-swipe>
          </van-notice-bar>
          <div class="luzhi">
            <van-icon name="bullhorn-o" />
            <span>录制</span>
          </div>
        </div>
      </div>
      <!-- 轮播 -->
      <div class="lunbo">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in banner" :key="item.actid">
            <img class="bannerImg" :src="item.picurl" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 分类 -->
      <van-grid class="type">
        <van-grid-item icon="bar-chart-o" text="排行" />
        <van-grid-item icon="apps-o" text="分类" />
        <van-grid-item icon="bookmark-o" text="听书会员" />
        <van-grid-item icon="video-o" text="有声书" />
      </van-grid>
      <!-- 猜你喜欢 -->
      <div class="mabyLikes">
        <div class="title">
          <span class="txt">猜你喜欢</span>
          <van-icon name="replay" @click="changePic" />
        </div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="type in typePic" :key="type.id">
            <van-image :src="type.radioImg" />
            <span>{{type.radioName}}</span>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 本周上新 -->
      <div class="newWeek">
        <div class="title">
          <span class="txt">本周上新</span>
          <span style="font-size:12px;">更多></span>
        </div>
        <div class="test">
          <div class="showNewWeek">
            <div class="showTime" v-for="item1 in smallPic" :key="item1.id">
              <div class="img">
                <img :src="item1.radioImg" @click="palyMusic" />
              </div>
              <div class="content">
                <span>大张伟CUT:谐音梗我是王中王</span>
                <span>吐槽大会第五季</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 音乐调频 -->
      <div class="newWeek">
        <div class="title">
          <span class="txt">音乐调频</span>
          <span style="font-size:12px;">更多></span>
        </div>
        <div class="test">
          <div class="showNewWeek">
            <div class="showTime" v-for="item1 in musicData" :key="item1.id">
              <div class="img">
                <img :src="item1.radioImg" />
              </div>
              <div class="content">
                <span>大张伟CUT:谐音梗我是王中王</span>
                <span>吐槽大会第五季</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 情感树洞 -->
      <div class="mabyLikes">
        <div class="title">
          <span class="txt">情感树洞</span>
          <span style="font-size:12px;">更多></span>
        </div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="type in loveData" :key="type.id">
            <van-image :src="type.radioImg" />
            <span>{{type.radioName}}</span>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 脱口秀 -->
      <div class="mabyLikes">
        <div class="title">
          <span class="txt">脱口秀</span>
          <span style="font-size:12px;">更多></span>
        </div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="type in tallShow" :key="type.id">
            <van-image :src="type.radioImg" />
            <span>{{type.radioName}}</span>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 明星专区 -->
      <div class="newWeek">
        <div class="title">
          <span class="txt">明星专区</span>
          <span style="font-size:12px;">更多></span>
        </div>
        <div class="test">
          <div class="showNewWeek">
            <div class="showTime" v-for="item1 in start" :key="item1.id">
              <div class="img">
                <img :src="item1.radioImg" />
              </div>
              <div class="content">
                <span>大张伟CUT:谐音梗我是王中王</span>
                <span>吐槽大会第五季</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 人文知识 -->
      <div class="mabyLikes">
        <div class="title">
          <span class="txt">脱口秀</span>
          <span style="font-size:12px;">更多></span>
        </div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="type in peopleBook" :key="type.id">
            <van-image :src="type.radioImg" />
            <span>{{type.radioName}}</span>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 有声小说 -->
      <div class="mabyLikes">
        <div class="title">
          <span class="txt">有声小说</span>
          <span style="font-size:12px;">更多></span>
        </div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="type in tallSay" :key="type.id">
            <van-image :src="type.radioImg" />
            <span>{{type.radioName}}</span>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 亲子儿童 -->
      <div class="mabyLikes">
        <div class="title">
          <span class="txt">亲子儿童</span>
          <span style="font-size:12px;">更多></span>
        </div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="type in parents" :key="type.id">
            <van-image :src="type.radioImg" />
            <span>{{type.radioName}}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data: () => ({
    dataAll: {},
    res: [],
    banner: [],
    typePic: [],
    smallPic: [],
    musicData: [],
    loveData: [],
    tallShow: [],
    start: [],
    peopleBook: [],
    tallSay: [],
    parents: [],
    count: 0,
    isLoading: false,
  }),
  methods: {
    // 轮播请求
    async getDigitalAlbumLists() {
      try {
        const res = await this.$http.getDigitalAlbumLists();
        this.banner = res.data.response.data.banner
      } catch (error) {

      }
    },
    // 页面渲染
    async getRadioLists() {
      try {
        const res = await this.$http.getRadioLists()
        this.dataAll = JSON.parse(JSON.stringify(res))
        this.typePic = res.data.response.data.data.groupList[0].radioList
        this.smallPic = res.data.response.data.data.groupList[5].radioList
        this.musicData = res.data.response.data.data.groupList[4].radioList
        this.loveData = res.data.response.data.data.groupList[6].radioList
        this.tallShow = res.data.response.data.data.groupList[3].radioList
        this.start = res.data.response.data.data.groupList[8].radioList
        this.peopleBook = res.data.response.data.data.groupList[2].radioList
        this.tallSay = res.data.response.data.data.groupList[1].radioList
        this.parents = res.data.response.data.data.groupList[7].radioList
        return res
      } catch (error) {
        
      }

    },
    // 下拉刷新请求
    onRefresh() {
      setTimeout(() => {
        let no = Math.floor(Math.random() * 8 + 1)
        this.typePic = this.dataAll.data.response.data.data.groupList[no].radioList
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    onClickIcon() {
      Toast('点击图标');
    },
    changePic() {
      let no = Math.floor(Math.random() * 8 + 1)
      this.typePic = this.dataAll.data.response.data.data.groupList[no].radioList
    },
    palyMusic() {
      this.$router.push('/radioMore')
    }
  },
  created() {
    this.getDigitalAlbumLists()
    this.getRadioLists()
  }
}
</script>
<style lang="scss">
.RadioStation {
  // 头部
  .radiostation {
    .ser {
      margin-top: 6px;
      display: flex;
      .notice-swipe {
        width: 100%;
      }
      .van-notice-bar {
        margin-bottom: 10px;
        margin-left: 20px;
        width: 268px;
        margin-right: 16px;
        border: 1px solid #eee;
        background-color: #eee;
        border-radius: 20px;
        height: 32px;
        .van-swipe {
          width: 100%;
          .van-swipe-item {
            color: #666;
            .van-icon {
              line-height: 32px;
              font-size: 16px;
              margin-right: 10px;
            }
          }
        }
      }
      // display: flex;
      .notice-swipe {
        width: 40px;
        height: 40px;
        line-height: 40px;
      }
    }
    .luzhi {
      height: 32px;
      width: 50px;
      background-color: #58d59d;
      color: #fff;
      border-radius: 15px;
      line-height: 32px;
      text-align: center;
      font-size: 12px;
    }
  }
  //benner
  .lunbo {
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    .van-swipe {
      height: 180px;
      border-radius: 15px;
      .bannerImg {
        width: 100%;
        height: 100%;
      }
    }
  }
  // type
  .type {
    .van-grid-item__content::after {
      border: none;
    }
    .van-grid-item__icon + .van-grid-item__text {
      color: black;
      font-weight: 600;
    }
    .van-icon::before {
      color: #58d59d;
      font-size: 30px;
    }
  }
  // mabyLikes
  .mabyLikes {
    .title {
      display: flex;
      justify-content: space-between;
      padding-left: 10px;
      padding-right: 10px;
      .txt {
        font-size: 16px;
        font-weight: 600;
      }
      .van-icon {
        font-size: 16px;
        font-weight: 600;
      }
    }
    .van-grid {
      overflow-x: auto;
      flex-wrap: nowrap;
      .van-grid-item {
        width: 138px;
        height: 174px;
        img {
          width: 122px;
          height: 122px;
        }
      }
    }
  }
  // 本周上新
  .newWeek {
    .title {
      display: flex;
      justify-content: space-between;
      padding-left: 10px;
      padding-right: 10px;
      .txt {
        font-size: 16px;
        font-weight: 600;
      }
    }
    .test {
      overflow-x: auto;
      .showNewWeek {
        margin-left: 16px;
        width: 1470px;
        display: flex;
        flex-wrap: wrap;
        overflow-x: auto;
        .showTime {
          width: 365px;
          display: flex;
          margin-bottom: 10px;
          height: 70px;
          .img {
            width: 70px;
            height: 70px;
            border: 1px solid #000;
            img {
              width: 70px;
              height: 70px;
            }
          }
          .content {
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            justify-content: center;
            span {
              &:nth-child(1) {
                font-size: 16px;
              }
              &:nth-child(2) {
                font-size: 12px;
                margin-top: 6px;
              }
            }
          }
        }
      }
    }
  }
}
</style>